/**
 * 自定义标题栏脚本
 * 处理窗口控制、拖拽等功能
 */

(function() {
  'use strict';

  console.log('[标题栏] 脚本加载');

  // 检测操作系统平台
  const platform = process.platform; // 'darwin', 'win32', 'linux'
  document.body.classList.add(`platform-${platform}`);

  // 等待DOM加载
  document.addEventListener('DOMContentLoaded', function() {
    console.log('[标题栏] 初始化，平台:', platform);

    // 获取按钮元素（支持新旧两种ID）
    const minimizeBtn = document.getElementById('titlebarMinimize') || document.getElementById('minimize-btn');
    const maximizeBtn = document.getElementById('titlebarMaximize') || document.getElementById('maximize-btn');
    const closeBtn = document.getElementById('titlebarClose') || document.getElementById('close-btn');

    console.log('[标题栏] 按钮元素:', { 
      minimizeBtn: !!minimizeBtn, 
      maximizeBtn: !!maximizeBtn, 
      closeBtn: !!closeBtn 
    });

    // 使用ipcRenderer与主进程通信
    const { ipcRenderer } = require('electron');
    const windowControl = {
      minimize: () => {
        console.log('[标题栏] 发送最小化事件');
        ipcRenderer.send('window-minimize');
      },
      maximize: () => {
        console.log('[标题栏] 发送最大化事件');
        ipcRenderer.send('window-maximize');
      },
      unmaximize: () => {
        console.log('[标题栏] 发送还原事件');
        ipcRenderer.send('window-unmaximize');
      },
      isMaximized: () => false, // 需要从主进程获取
      close: () => {
        console.log('[标题栏] 发送关闭事件');
        ipcRenderer.send('window-close');
      }
    };

    // 最小化窗口
    if (minimizeBtn) {
      minimizeBtn.addEventListener('click', () => {
        console.log('[标题栏] 最小化窗口');
        windowControl.minimize();
      });
    }

    // 最大化/还原窗口
    if (maximizeBtn) {
      maximizeBtn.addEventListener('click', () => {
        if (windowControl.isMaximized && windowControl.isMaximized()) {
          console.log('[标题栏] 还原窗口');
          windowControl.unmaximize();
          maximizeBtn.innerHTML = '<span>□</span>';
        } else {
          console.log('[标题栏] 最大化窗口');
          windowControl.maximize();
          maximizeBtn.innerHTML = '<span>◱</span>';
        }
      });
    }

    // 关闭窗口
    if (closeBtn) {
      closeBtn.addEventListener('click', () => {
        console.log('[标题栏] 关闭窗口');
        windowControl.close();
      });
    }

    // 云同步按钮（支持新旧两种ID）
    const cloudSyncBtn = document.getElementById('titlebarCloudSync') || document.getElementById('cloud-sync-btn');
    if (cloudSyncBtn) {
      cloudSyncBtn.addEventListener('click', () => {
        console.log('[标题栏] 点击云同步按钮');
        
        // 检查是否存在 switchView 函数（在 base.html 中）
        if (typeof window.switchView === 'function') {
          window.switchView('queue');
        } else if (typeof switchView === 'function') {
          switchView('queue');
        } else {
          console.log('[标题栏] switchView 函数不存在，尝试导航到队列页面');
          // 如果在独立页面中，可以在这里添加其他导航逻辑
        }
      });
    }

    // 更新标题（从页面title读取）
    const titlebarTitle = document.getElementById('titlebarTitle');
    if (titlebarTitle) {
      const pageTitle = document.title;
      if (pageTitle && pageTitle !== '文件同步器') {
        titlebarTitle.textContent = pageTitle;
      }
      
      // 监听title变化
      const observer = new MutationObserver(() => {
        titlebarTitle.textContent = document.title;
      });
      
      observer.observe(document.querySelector('title') || document.head, {
        childList: true,
        characterData: true,
        subtree: true
      });
    }

    // 设置用户头像
    const titlebarAvatar = document.getElementById('titlebarAvatarImg');
    if (titlebarAvatar) {
      loadUserAvatar(titlebarAvatar);
    }

    // 初始化用户菜单
    initUserMenu();

    console.log('[标题栏] 初始化完成');
  });

  /**
   * 创建占位头像（蓝色背景+用户名首字）
   */
  function createPlaceholderAvatar(username) {
    const firstChar = username ? username.charAt(0).toUpperCase() : '用';
    
    // 创建 canvas 生成头像
    const canvas = document.createElement('canvas');
    canvas.width = 100;
    canvas.height = 100;
    const ctx = canvas.getContext('2d');
    
    // 绘制蓝色背景
    ctx.fillStyle = '#028FFE';
    ctx.fillRect(0, 0, 100, 100);
    
    // 绘制白色文字
    ctx.fillStyle = '#ffffff';
    ctx.font = 'bold 50px -apple-system, BlinkMacSystemFont, sans-serif';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText(firstChar, 50, 50);
    
    // 转换为 Data URL
    return canvas.toDataURL('image/png');
  }

  /**
   * 加载用户头像
   */
  async function loadUserAvatar(avatarElement) {
    try {
      const { ipcRenderer } = require('electron');
      
      // 获取用户配置（用于占位头像）
      const userConfig = await ipcRenderer.invoke('get-user-config');
      const username = userConfig?.username || '用户';
      
      // 从主进程获取本地头像路径
      const avatarPath = await ipcRenderer.invoke('get-user-avatar');
      
      // 添加图片加载失败监听
      avatarElement.onerror = function() {
        console.log('[标题栏] 头像加载失败，使用占位头像');
        avatarElement.src = createPlaceholderAvatar(username);
        avatarElement.onerror = null; // 防止无限循环
      };
      
      if (avatarPath) {
        // 使用file://协议加载本地图片
        avatarElement.src = `file://${avatarPath}`;
        console.log('[标题栏] 头像加载成功:', avatarPath);
      } else {
        // 如果没有头像路径，直接使用占位头像
        avatarElement.src = createPlaceholderAvatar(username);
      }
    } catch (error) {
      console.error('[标题栏] 加载头像失败:', error);
      // 使用占位头像
      try {
        const { ipcRenderer } = require('electron');
        const userConfig = await ipcRenderer.invoke('get-user-config');
        const username = userConfig?.username || '用户';
        avatarElement.src = createPlaceholderAvatar(username);
      } catch (e) {
        avatarElement.src = createPlaceholderAvatar('用户');
      }
    }
  }

  /**
   * 初始化用户菜单
   */
  function initUserMenu() {
    console.log('[标题栏] 开始初始化用户菜单');
    
    const avatarContainer = document.getElementById('titlebarAvatar');
    const userMenu = document.getElementById('userMenu');
    const userMenuAvatarImg = document.getElementById('userMenuAvatarImg');
    
    console.log('[标题栏] 头像容器:', avatarContainer);
    console.log('[标题栏] 用户菜单:', userMenu);
    
    if (!avatarContainer) {
      console.error('[标题栏] 找不到头像容器元素 #titlebarAvatar');
      return;
    }
    
    if (!userMenu) {
      console.error('[标题栏] 找不到菜单元素 #userMenu');
      return;
    }
    
    console.log('[标题栏] 菜单元素找到，绑定事件...');

    let hideTimer = null;

    // 显示菜单
    function showMenu() {
      clearTimeout(hideTimer);
      userMenu.classList.add('show');
      console.log('[标题栏] 显示用户菜单');
    }

    // 隐藏菜单
    function hideMenu() {
      hideTimer = setTimeout(() => {
        userMenu.classList.remove('show');
        console.log('[标题栏] 隐藏用户菜单');
      }, 200);
    }

    // 鼠标悬停在头像上时显示菜单
    avatarContainer.addEventListener('mouseenter', showMenu);
    avatarContainer.addEventListener('mouseleave', hideMenu);

    // 鼠标在菜单上时保持显示
    userMenu.addEventListener('mouseenter', showMenu);
    userMenu.addEventListener('mouseleave', hideMenu);

    // 同步头像
    if (userMenuAvatarImg) {
      loadUserAvatar(userMenuAvatarImg);
    }

    // 加载用户信息
    loadUserInfo();

    // 绑定菜单项点击事件
    bindMenuItemEvents();
  }

  /**
   * 加载用户信息
   */
  async function loadUserInfo() {
    try {
      const { ipcRenderer } = require('electron');
      const userConfig = await ipcRenderer.invoke('get-user-config');
      
      if (userConfig) {
        const userMenuName = document.getElementById('userMenuName');
        const userSignatureInput = document.getElementById('userSignatureInput');
        
        if (userMenuName && userConfig.username) {
          userMenuName.textContent = userConfig.username;
        }
        
        if (userSignatureInput && userConfig.signature) {
          userSignatureInput.value = userConfig.signature;
        }
      }
    } catch (error) {
      console.error('[标题栏] 加载用户信息失败:', error);
    }
  }

  /**
   * 显示顶部提示
   */
  function showTopToast(message) {
    // 创建提示元素
    const toast = document.createElement('div');
    toast.style.cssText = `
      position: fixed;
      top: 45px;
      left: 50%;
      transform: translateX(-50%);
      background: #ffffff;
      color: #262626;
      padding: 12px 24px;
      border-radius: 8px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      z-index: 10000;
      font-size: 14px;
      font-weight: 500;
      animation: slideDown 0.3s ease;
      pointer-events: none;
    `;
    toast.textContent = message;
    
    // 添加动画样式
    const style = document.createElement('style');
    style.textContent = `
      @keyframes slideDown {
        from {
          opacity: 0;
          transform: translateX(-50%) translateY(-20px);
        }
        to {
          opacity: 1;
          transform: translateX(-50%) translateY(0);
        }
      }
      @keyframes slideUp {
        from {
          opacity: 1;
          transform: translateX(-50%) translateY(0);
        }
        to {
          opacity: 0;
          transform: translateX(-50%) translateY(-20px);
        }
      }
    `;
    document.head.appendChild(style);
    
    // 添加到页面
    document.body.appendChild(toast);
    
    // 2秒后移除
    setTimeout(() => {
      toast.style.animation = 'slideUp 0.3s ease';
      setTimeout(() => {
        document.body.removeChild(toast);
        document.head.removeChild(style);
      }, 300);
    }, 2000);
  }

  /**
   * 绑定菜单项点击事件
   */
  function bindMenuItemEvents() {
    const { ipcRenderer } = require('electron');
    
    // 我的个人名片
    const menuMyCard = document.getElementById('menuMyCard');
    if (menuMyCard) {
      menuMyCard.addEventListener('click', () => {
        console.log('[用户菜单] 点击：我的个人名片');
        showTopToast('功能开发中，敬请期待！');
      });
    }

    // 我的二维码与链接
    const menuMyQRCode = document.getElementById('menuMyQRCode');
    if (menuMyQRCode) {
      menuMyQRCode.addEventListener('click', () => {
        console.log('[用户菜单] 点击：我的二维码与链接');
        showTopToast('功能开发中，敬请期待！');
      });
    }

    // 修改更多账号
    const menuMoreAccounts = document.getElementById('menuMoreAccounts');
    if (menuMoreAccounts) {
      menuMoreAccounts.addEventListener('click', () => {
        console.log('[用户菜单] 点击：修改更多账号');
        showTopToast('功能开发中，敬请期待！');
      });
    }

    // 帮助与版权
    const menuHelp = document.getElementById('menuHelp');
    if (menuHelp) {
      menuHelp.addEventListener('click', () => {
        console.log('[用户菜单] 点击：帮助与版权');
        showTopToast('功能开发中，敬请期待！');
      });
    }

    // 设置
    const menuSettings = document.getElementById('menuSettings');
    if (menuSettings) {
      menuSettings.addEventListener('click', () => {
        console.log('[用户菜单] 点击：设置');
        showTopToast('功能开发中，敬请期待！');
      });
    }

    // 退出登录
    const menuLogout = document.getElementById('menuLogout');
    if (menuLogout) {
      menuLogout.addEventListener('click', async () => {
        console.log('[用户菜单] 点击：退出登录');
        
        // 确认对话框
        const confirmed = confirm('确定要退出登录吗？');
        if (confirmed) {
          try {
            // 通知主进程执行登出
            await ipcRenderer.invoke('logout');
            console.log('[用户菜单] 退出登录成功');
          } catch (error) {
            console.error('[用户菜单] 退出登录失败:', error);
          }
        }
      });
    }

    // 签名按钮
    const userSignBtn = document.getElementById('userSignBtn');
    const userSignatureInput = document.getElementById('userSignatureInput');
    if (userSignBtn && userSignatureInput) {
      userSignBtn.addEventListener('click', () => {
        userSignatureInput.focus();
      });

      // 保存签名
      userSignatureInput.addEventListener('blur', async () => {
        const signature = userSignatureInput.value.trim();
        try {
          await ipcRenderer.invoke('save-user-signature', signature);
          console.log('[用户菜单] 签名已保存:', signature);
        } catch (error) {
          console.error('[用户菜单] 保存签名失败:', error);
        }
      });
    }
  }

  // 导出函数供外部使用
  if (typeof window !== 'undefined') {
    window.reloadAvatar = function() {
      const titlebarAvatar = document.getElementById('titlebarAvatarImg');
      if (titlebarAvatar) {
        loadUserAvatar(titlebarAvatar);
      }
      
      // 同时更新用户菜单头像
      const userMenuAvatar = document.getElementById('userMenuAvatarImg');
      if (userMenuAvatar) {
        loadUserAvatar(userMenuAvatar);
      }
      
      // 同时更新侧边栏头像（如果存在）
      const userAvatar = document.getElementById('userAvatarImg');
      if (userAvatar) {
        loadUserAvatar(userAvatar);
      }
    };
  }
})();
